<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            overflow: hidden;
            height: 100%;
        }
    </style>
    <title>WebGL training - Setup</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script type="module">
        import {
            Data,
            Scene,
            Engine
        } from '../js/bundle.js';
        let scene = new Scene();

        scene.add(new Data({
            vertices: [
                -0.5, 0.5, 0.0,
                -0.5, -0.5, 0.0,
                0.5, -0.5, 0.0,
                0.5, 0.5, 0.0
            ],
            colors: [
                1.0, 0.0, 0.0, 1.0,
                0.0, 1.0, 0.0, 1.0,
                0.0, 0.0, 1.0, 1.0,
                1.0, 0.0, 1.0, 1.0,
            ],
        }));

        scene.add(new Data({
            vertices: [
                -0.25, 0.25, 0.0,
                -0.25, -0.25, 0.0,
                0.25, -0.25, 0.0,
                0.25, 0.25, 0.0
            ],
            colors: [
                1.0, 0.0, 0.0, 1.0,
                0.0, 1.0, 0.0, 1.0,
                0.0, 0.0, 1.0, 1.0,
                1.0, 0.0, 1.0, 1.0,
            ],
        }));

        let engine = new Engine(scene);

    </script>
</body>

</html>